<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<c:set var="uploadPath" value="${redis:getSysConfig('uploadFileVisitRoot')}"/>
<script type="text/javascript">
    /**
     * 表单提交及验证初始化
     */
    var form_tab;
    $(document).ready(function() {
        form_tab=$("#form_tab");
        if(form_tab.length>0){ /**判断当前页面是否有填写表单并检验**/
        validateFormTab();
            /**Modal验证销毁重构**/
            $('#addOrEditModalTab').on('hidden.bs.modal', function() {
                reValidateFormTab();
            });
        }
    });

    /**
     * 重置表单验证
     */
    function reValidateFormTab(){
        form_tab.data('bootstrapValidator', null);
        validateFormTab();
    }

    /**
     * 指定字段移除验证
     */
    function removeValidateFieldTab(validateField){
        form_tab.bootstrapValidator('enableFieldValidators', validateField, false);
    }

    /**
     * 指定表单字段重新建立验证
     */
    function rebuildValidateFieldTab(validateField){
        form_tab.bootstrapValidator('enableFieldValidators', validateField, true);
    }

    /**
     * 指定表单字段重新进行验证
     */
    function reValidateFieldTab(validateField){
        form_tab.bootstrapValidator('revalidateField', validateField);
    }

    /**
     * 重置添加表单
     */
    function resetAddFormTab(){
        $("#form_tab")[0].reset();
    }

    /**
     * bootstrap  fileinput 文件上传  点击“添加”调用
     * uploadIndex：页面文件的顺序位置
     * subSysFolderName：子系统目录
     * imageInfoPath：文件上传的存储目录
     * maxFileCount：最多上传文件数量
     * maxImageWidth：上传图片的最大宽度
     * maxImageHeight：上传图片的最大高度
     */
    function  initImageForAddTab(uploadIndex,subSysFolderName,imageInfoPath,maxFileCount,maxImageWidth,maxImageHeight){
        $(".container").css("padding","0px 0px 0px 0px").css("width","auto");
        $(".file-drop-zone").css("height","100px");
        $("#fileWrap"+uploadIndex).empty().html("<input id='file_"+uploadIndex+"'  class='file input-group input-group-sm'  name='imageInfo_"+uploadIndex+"' type='file' >");
        $("#file_"+uploadIndex).fileinput({
            language:'zh',  /**默认中文**/
            dropZoneEnabled:false,  /**是否显示拖拽区域**/
            showUpload: false,  /**是否显示批量上传**/
            uploadAsync:true,  /**默认异步上传**/
            showRemove : false, /**显示移除按钮**/
            showPreview : true, /**是否显示预览**/
            showCaption: true,  /**是否显示标题**/
            browseClass: "btn btn-primary",  /**按钮样式**/
            autoReplace: true, /**自动替换**/
            maxFileCount: maxFileCount,  /**表示允许同时上传的最大文件个数**/
            maxFileSize: 2048,  /**单位为kb，文件大小为2M，如果为0表示不限制文件大小**/
            maxImageWidth: maxImageWidth,  /**图片的最大宽度**/
            maxImageHeight: maxImageHeight,  /**图片的最大高度**/
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            uploadUrl: '${basePath}/back/upload/uploadImageFile.sjson?subSysFolderName='+subSysFolderName+'&imageInfoPath='+imageInfoPath,  /**上传的地址(访问接口地址)image_phoneCategory**/
            allowedFileExtensions: ['jpg', 'png', 'gif'],  /**接收的文件后缀**/
            overwriteInitial: false
        }).on("filebatchselected", function(event, files) { /**已经选择文件未上传回调的事件**/
            /**隐藏整体的上传文件进度条**/
            $(".kv-upload-progress").hide();
            /**隐藏上传文件右上角的 x **/
            $(".fileinput-remove").hide();
            /**自动上传图片**/
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data) { /**文件上传成功回调的事件**/
            if(data.response){
                var isSuccess = JSON.parse(data.response.success);
                if(isSuccess){
                    /**从respone中获取resultMsg对象**/
                    var resultMsg = JSON.parse(data.response.data);
                    /**将重新上传的图片回写到隐藏域中**/
                    $("#imageUrl_"+uploadIndex).val(resultMsg.photoUrl).change();
                }else{
                    /**上传失败后，动态添加上传检验并验证失败**/
                    var message = JSON.parse(data.response.msg);
                    showMsg(message);
                }
            }

        }).on('fileimagesloaded', function(event) {
            $("#file_"+uploadIndex).hide();
        }).on("filesuccessremove", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#file_"+uploadIndex).show();
            $("#imageUrl_"+uploadIndex).val("").change();
            /**移除上传文件后，动态添加上传检验并验证失败**/
            rebuildValidateFieldTab('imageInfo_'+uploadIndex);
            reValidateFieldTab('imageInfo_'+uploadIndex);
        }).on("fileremoved", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#file_"+uploadIndex).show();
            /**删除原始文件后将隐藏域置空**/
            rebuildValidateFieldTab('imageInfo_'+uploadIndex);
            reValidateFieldTab('imageInfo_'+uploadIndex);
        });
        reValidateFormTab();
    }

    /**
     * bootstrap  fileinput 文件上传  点击“修改”调用
     * uploadIndex：页面文件的顺序位置
     * subSysFolderName：子系统目录
     * imageInfoPath：文件上传的存储目录
     * maxFileCount：最多上传文件数量
     * maxImageWidth：上传图片的最大宽度
     * maxImageHeight：上传图片的最大高度
     * visitFileRoot：图片预览的访问根路径
     * fileSaveUrl：图片预览的访问相对路径
     * fileName：文件原始的名称
     */
    function  initImageForUpdateTab(uploadIndex,subSysFolderName,imageInfoPath,maxFileCount,maxImageWidth,maxImageHeight,visitFileRoot,fileSaveUrl){
        var fileName="";
        if(fileSaveUrl!=undefined&&fileSaveUrl!=""){
            fileName=fileSaveUrl.substring(fileSaveUrl.lastIndexOf("/")+1);
        }else{
            fileName="图片丢失了，请重新上传！";
        }
        $(".container").css("padding","0px 0px 0px 0px").css("width","auto");
        $(".file-drop-zone").css("height","auto");
        $("#fileWrap"+uploadIndex).empty().html("<input id='file_"+uploadIndex+"' value='C://123.jpg' class='file input-group input-group-sm form-control' name='imageInfo_"+uploadIndex+"' type='file'>");
        /**在 ajax中 初始化 fileinput 是配置参数是不起作用的  需要 先销毁，再初始化**/
        $("#file_"+uploadIndex).fileinput('destroy');

        $("#file_"+uploadIndex).fileinput({
            language:'zh',  /**默认中文**/
            uploadAsync:true,  /**默认异步上传**/
            dropZoneEnabled:false,  /**是否显示拖拽区域**/
            showUpload: false,  /**是否显示批量上传**/
            showRemove : false, /**显示移除按钮**/
            showPreview : true, /**是否显示预览**/
            showCaption: true,  /**是否显示标题**/
            browseClass: "btn btn-primary",  /**按钮样式**/
            autoReplace: true,  /**自动替换**/
            maxFileCount: maxFileCount,  /**表示允许同时上传的最大文件个数**/
            maxFileSize: 2048, /**单位为kb，文件大小为2M，如果为0表示不限制文件大小**/
            maxImageWidth: maxImageWidth,  /**图片的最大宽度**/
            maxImageHeight: maxImageHeight,  /**图片的最大高度**/
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            uploadUrl: '${basePath}/back/upload/uploadImageFile.sjson?subSysFolderName='+subSysFolderName+'&imageInfoPath='+imageInfoPath, /**上传的地址(访问接口地址)**/
            allowedFileExtensions: ['jpg', 'png', 'gif'],  /**接收的文件后缀**/
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',
            //initialPreviewShowDelete:true,
            initialPreview: [
                visitFileRoot+"/"+fileSaveUrl
            ],
            initialPreviewConfig:[
                {caption: fileName,width: '0px',url: '${basePath}/back/upload/deleteFile.sjson?fileStoreUrl='+fileSaveUrl,  key: 100,  extra: {id: 100}}
            ]
        }).on("filebatchselected", function(event, files) {  /**已经选择文件未上传回调的事件**/
            /**隐藏整体的上传文件进度条**/
            $(".kv-upload-progress").hide();
            /**隐藏上传文件右上角的 x **/
            $(".fileinput-remove").hide();
            /**自动上传图片**/
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data) { /**文件上传成功回调的事件**/
            if(data.response){
                var isSuccess = JSON.parse(data.response.success);
                if(isSuccess){
                    /**从respone中获取resultMsg对象**/
                    var resultMsg = JSON.parse(data.response.data);
                    /**将重新上传的图片回写到隐藏域中**/
                    $("#imageUrl_"+uploadIndex).val(resultMsg.photoUrl).change();
                }else{
                    /**上传失败后，获取失败信息并展示**/
                    var message = JSON.parse(data.response.msg);
                    showMsg(message);
                }
            }
        }).on('fileimagesloaded', function(event) {
            $("#file_"+uploadIndex).hide();
        }).on("filesuccessremove", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#file_"+uploadIndex).show();
            $("#imageUrl_"+uploadIndex).val("").change();
            /**移除上传文件后，动态添加上传检验并验证失败**/
            rebuildValidateFieldTab('imageInfo_'+uploadIndex);
            reValidateFieldTab('imageInfo_'+uploadIndex);
        }).on("fileremoved", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#file_"+uploadIndex).show();
            rebuildValidateFieldTab('imageInfo_'+uploadIndex);
            reValidateFieldTab('imageInfo_'+uploadIndex);
        }).on('filepredelete', function(event, key, jqXHR, data) { /**删除已上传的文件回调的事件**/
        $("#file_"+uploadIndex).show();
            /** 删除原始文件后将隐藏域置空 **/
            $("#imageUrl_"+uploadIndex).val("").change();
            rebuildValidateFieldTab('imageInfo_'+uploadIndex);
            reValidateFieldTab('imageInfo_'+uploadIndex);
        });
        $("#file_"+uploadIndex).hide();
        reValidateFormTab();
    }

    /**
     * 自定义验证规则
     */
    function validateFormTab() {
        form_tab.bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                imageInfo_2: {
                    validators: {
                        notEmpty: {message: "请上传图片"},
                        file: {maxSize: 1024 * 1024, message: '请上传一张最大不超过1M的jpg/png/gif图片文件'}
                    }
                },
                sortName: {
                    validators: {
                        notEmpty: {message: "PC分类名称不可为空"},
                        stringLength: {min:2,max: 50, message: "PC分类名称长度为2至50"}
                    }
                },
                sortAppName: {
                    validators: {
                        notEmpty: {message: "APP分类名称不可为空"},
                        stringLength: {min:2,max: 50, message: "APP分类名称长度为2至50"}
                    }
                },
                sortCode: {
                    validators: {
                        stringLength: {max: 4, message: "分类排序最大长度为5"},
                        numeric: {
                            message: '只能输入数字'
                        }
                    }
                },
                categoryDescription: {
                    validators: {
                        stringLength: {min:2,max: 150, message: "分类描述长度为2至150"}
                    }
                },
                link: {
                    validators: {
                        notEmpty: {message: "链接不可为空"},
                        stringLength: {max: 200, message: "链接最大长度为200"},
                        regexp: {
                            regexp: validateUtil.webUrl,
                            message: '请输入有效的网址'
                        }
                    }
                }
            }
        });
    }

    /**
     * 添加首页中间部分tab数据
     */
	<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_add">
    function addInfoTab() {
        $("#myModalLabelTab").empty().text("添加首页中间部分tab数据");
        /**清空隐藏域的值**/
        $("#imageUrl_2").val("");
        $("#tab_categoryTabId").val("");
        $("#tab_createTime").val("");
        $("#tab_publishUser").val("");
        /**设置固定隐藏域的值  通过左侧的树节点点击展示右侧的子节点列表，则节点的id为列表的子节点的父id**/
        $("#tab_categoryId").val($("#q_categoryId_tab").val());
        /**回写预览上传文件所需的信息，如果有上传图片功能添加此代码，否则可以去掉**/
        initImageForAddTab(2,"sys_shop", "image_homeMiddleCategoryTAB", 1, 500, 500);
        resetAddFormTab();
    }
	</shiro:hasPermission>

    /**
     * 编辑首页中间部分tab数据
     */
	<shiro:hasPermission name="back_gotoShopHomeMiddleCategoryBilateralPage_update">
    function editInfoTab() {
        $("#myModalLabelTab").empty().text("修改首页中间部分tab数据");
        /**获取选中行的id**/
        var selectedRow = $("#tt_tab").bootstrapTable('getSelections');
        if (selectedRow.length == 1) {
            var id = selectedRow[0].categoryTabId;
            $("#btn_edit_tab").attr("data-target", "#addOrEditModalTab");/**选中了记录后才可打开对应的模态框**/
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "${basePath}/back/shopHomeMiddleCategoryTAB/getShopHomeMiddleCategoryTABObj.sjson",
                data: {categoryTabId: id},
                success: function (result) {
                    var data = JSON.parse(result.data);
                    /**隐藏域**/
                    $("#tab_categoryId").val(data.categoryId);
                    $("#imageUrl_2").val(data.imageUrl);
                    $("#tab_createTime").val(new Date(data.createTime).Format("yyyy-MM-dd hh:mm:ss"));
                    $("#tab_publishUser").val(data.publishUser);
                    $("#tab_categoryTabId").val(data.categoryTabId);
                    /**可见表单控件**/
                    $("#tab_imageType_"+data.imageType).attr("checked","checked");
                    $("#tab_isShow_"+data.isShow).attr("checked","checked");
                    $("#tab_title").val(data.title);
                    $("#tab_synopsis").val(data.synopsis);
                    $("#tab_link").val(data.link);
                    $("#tab_sortCode").val(data.sortCode);

                    /**回写预览上传文件所需的信息，如果有上传图片功能添加此代码，否则可以去掉**/
                    initImageForUpdateTab(2,"sys_shop", "image_homeMiddleCategoryTAB", 1, 500, 500, "${uploadPath}", data.imageUrl);
                    reValidateFormTab();
                    removeValidateFieldTab('imageInfo_2');
                }
            });
        } else {
            $("#btn_edit_tab").attr("data-target", "");/**没有选中记录不可打开模态框**/
            showMsg("请选择一行记录！");
        }
    }
    </shiro:hasPermission>

    /**
     * 重置查询表单
     */
    function resetQueryFormTab(){
        $("#qform_tab")[0].reset();
    }

    /**
     * 表单异步提交
     */
    /** 1:没有选中文件上传或没有上传文件功能 2：选中未上传 3：选中文件上传成功**/
    var fileUploadState=1;
    var isValid;
    function submitFormTab(){
        /** 开启验证**/
        form_tab.data('bootstrapValidator').validate().validate();
        isValid=form_tab.data('bootstrapValidator').isValid();
        if(isValid){  /** 验证通过后提交表单**/
        var options = {
                url: form_tab.attr("action"),
                type : "post",
                dataType:"json",
                success : function(data) {
                    if(data.success==true){
                        /** 先重置查询框的值**/
                        resetQueryFormTab();
                        /** 重新刷新列表数据**/
                        $("#tt_tab").bootstrapTable('refresh');
                        /** 自动关闭弹出模态框窗口**/
                        $(".close").click();
                        showMsg("保存成功！");
                    }else{
                        showMsg("保存失败！");
                    }
                }
            };
            if(fileUploadState==1||fileUploadState==3){
                form_tab.ajaxSubmit(options);
                return true;
            }else{
                showMsg("请上传已选中的图片或重新上传图片！");
                return false;
            }
        }else{ /** 验证失败了直接返回 **/

        }
    }

</script>

<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addOrEditModalTab" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" style="width:70%">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h5 class="modal-title" id="myModalLabelTab"></h5>
			</div>
			<div class="modal-body">
				<form id="form_tab" method="post" action="${basePath}/back/shopHomeMiddleCategoryTAB/saveOrUpdateShopHomeMiddleCategoryTAB.sjson">
					<input id="tab_categoryTabId" type="hidden" name="categoryTabId" value="" >
					<input id="tab_categoryId" type="hidden" name="categoryId" value="" noclear="true">
					<input id="tab_createTime" type="hidden" name="createTime" value="">
					<input id="tab_publishUser" type="hidden" name="publishUser" value="">

					<table align="center" class="addOrEditTable table-bordered table" style="width:100%;">
						<tr>
							<td class="toright_td"><span style="color:red">* </span>图片</td>
							<td class="toleft_td" colspan="3">
								<div class="container">
									<input id="imageUrl_2" type="hidden" name="imageUrl" value=""/>
									<div class="form-group" id="fileWrap2"></div>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td"><span style="color:red">* </span>图片类型:&nbsp;&nbsp;</td>
							<td class="toleft_td" colspan="3">
								<c:forEach items="${redis:getHomeKeyBook('middleTAB')}" var="kb">
									<input type="radio" id="tab_imageType_${kb.value}" name="imageType" value="${kb.value}" checked/>${kb.name}&nbsp;&nbsp;
								</c:forEach>
							</td>
						</tr>
						<tr>
							<td class="toright_td"><span style="color:red">* </span>标题:&nbsp;&nbsp;</td>
							<td class="toleft_td" colspan="3">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="tab_title" name="title" placeholder="请输入标题"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td"><span style="color:red">* </span>描述:&nbsp;&nbsp;</td>
							<td class="toleft_td" colspan="3">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="tab_synopsis" name="synopsis" placeholder="请输入描述"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td"><span style="color:red">* </span>网址链接:&nbsp;&nbsp;</td>
							<td class="toleft_td" colspan="3">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="tab_link" name="link" placeholder="请输入网址链接"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>排序号:&nbsp;&nbsp;</td>
							<td class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="tab_sortCode" name="sortCode" placeholder="请输入排序号"/>
								</div>
							</td>
							<td class="toright_td" width="150px"><span style="color:red">* </span>是否显示:&nbsp;&nbsp;</td>
							<td class="toleft_td">
								<label class="checkbox-inline">
									<input type="radio" name="isShow" id="tab_isShow_1" class="radioInput" value="1" checked="checked">&nbsp;已显示
								</label>
								<label class="checkbox-inline">
									<input type="radio" name="isShow" id="tab_isShow_0" class="radioInput" value="0">&nbsp;未显示
								</label>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="validateBtn" class="btn btn-primary" onclick="submitFormTab()">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>